<template>
  <div style="min-height: calc(100vh - 340px)">
    <a-form
      :model="formState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item>
        <a-input
          v-model:value="formState.username"
          placeholder="优惠码"
          style="width: 220px"
          allowClear
        >
        </a-input>
      </a-form-item>

      <a-form-item>
        <a-range-picker v-model:value="formState.time" allowClear />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getData" :icon="h(SearchOutlined)"
          >查询</a-button
        >
      </a-form-item>
    </a-form>
    <a-table
      class="ant-table-striped mt-[20px]"
      size="middle"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :row-class-name="
        (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
      "
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex == 'createtime'">
          {{ record?.createtime ? getDate(record?.createtime) : "--" }}
        </template> </template
      >createtime
    </a-table>
    <a-pagination
      class="mt-[20px]"
      v-model:current="page.current"
      show-quick-jumper
      :total="page.total"
      @change="onChange"
      :show-total="(total) => `共 ${page.total} 条`"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { exchange_use_yes, getDate } from "../../../../Api/work";
import { h } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
const page = reactive({
  current: 1,
  total: 0,
  size: 10,
});

const formState = ref({
  username: "",
  time: [],
});
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const columns = [
  { title: "优惠码", dataIndex: "code" },
  { title: "优惠金额", dataIndex: "preferential_price" },
  { title: "使用时间", dataIndex: "createtime" },
];
const dataSource = ref([]);
const getData = async () => {
  console.log("formState.value", formState.value);

  const params = {
    ...formState.value,
    page: page.current,
    limit: page.size,
  };

  // if(params.time?.[0]){
  //   params.start_time=params.time?.[0].format("YYYY-MM-DD")
  //   params.end_time=params.time?.[1].format("YYYY-MM-DD")
  // }

  if (params.time?.[0]) {
    // params.start_time = params.time?.[0].unix();
    // params.end_time = params.time?.[1].unix();
    params.start_time = dayjs(
      params.time?.[0].format("YYYY-MM-DD 00:00:00")
    ).unix();
    params.end_time = dayjs(
      params.time?.[1].format("YYYY-MM-DD 23:59:59")
    ).unix();
    delete params.time;
  }

  const res = await exchange_use_yes(params);
  dataSource.value = res.data?.data?.list;

  page.total = res.data?.data?.count;
};

getData();

const onChange = (p) => {
  page.current = p;
  getData();
};
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #edf0f6;
}

:deep(
    :where(.css-dev-only-do-not-override-omspr6).ant-table-wrapper
      .ant-table-thead
      > tr
      > th
  ) {
  background: #ecf4ff !important;
}
</style>
